import Vue from 'vue'
import Vuex from 'vuex'
// 引入vuex持久化插件
import createPersistedState from 'vuex-persistedstate'
// 导入获取用户信息API
import { getUserInfoAPI } from '@/api'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    token: '', // 保存token字符串
    userInfo: {}, // 定义用户信息对象
  },
  getters: {},
  mutations: {
    // 更新 token 的 mutation 函数
    updateToken(state, payload) {
      state.token = payload
    },
    // 更新用户的信息
    updateUserInfo(state, payload) {
      state.userInfo = payload
    },
  },
  actions: {
    // 定义初始化用户基本信息的 action 函数
    async initUserInfo(context, payload) {
      const { data: res } = await getUserInfoAPI()
      // console.log(res)
      if (res.code === 0) {
        context.commit('updateUserInfo', res.data)
      }
    },
  },
  modules: {},
  plugins: [
    createPersistedState(), // 注入持久化插件
  ],
})

// vuex 默认保存在内存中，所以刷新所有值会回归初始化（无法做到持久存储）
// 借助 vuex-persistedstate@3.2.1 这个包可以让vuex做持久化存储
